<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #id {
      color: red;
      font-size: 40px;
    }
  </style>
</head>
<body>
  <p>在ES5中有一些对象的属性值是不能直接修改的，是内部值，需要类似[[Enumerable]]的方式修改。</p>
  <p>要想修改属性默认的特性，需要通过Object.defineProperty()方法。ES中共有两种属性：数据属性和访问器属性。</p>
  <p>数据属性（数据描述符）</p>
  <ul>
    <li>Configurable</li>
    <li>Enumerbale</li>
    <li>Writeable</li>
    <li>Value</li>
  </ul>
  <p>访问器属性（存储描述符）</p>
  <ul>
    <li>Configurable</li>
    <li>Enumerbale</li>
    <li>getter</li>
    <li>setter</li>
  </ul>
  <h1 id="id">18</h1>
  <input type="text" id="input" onchange="changeHandler()">
  <script>
    let person1 = {
      name: 'Jack',
      age: 18
    }
    Object.defineProperty(person1, 'age', {
      writable: false,
      value: 20,
      configurable: false
    })


    let person2 = {
      name: 'Jack',
      _age: 18
    }
    Object.defineProperty(person2, 'age', {
      get: function() {
        return this._age + '岁'
      },
      // 注意！！！VUE就是这样写的
      set: function(val) {
        let id = document.getElementById('id');
        id.innerHTML = val;
        return val
      }
    })
    function changeHandler() {
      let val = input.value;
      person2.age = val
    }
  </script>
</body>
</html>